    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件绑定与解绑兼容写法</title>
        <style>
            *{
                margin:0;
                padding: 0;
                text-align: center;
                margin-top: 20px;
            }
            button{
                width: 100px;
                height: 40px;
                background-color: #7AB800;
                line-height: 40px;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
    <button>点击</button>
    </body>
    <script>
        var btn=document.getElementsByTagName("button")[0];
        //         btn.onclick=fn;
      // btn.addEventListener("click",fn1);//简单绑定
       //btn.addEventListener("click",fn2);//简单绑定,因为addEventListener仅仅支持高版本的浏览器，IE678不支持 attachEvent()仅仅针对IE678
        //对兼容IE678进行封装
//        btn.attachEvent("onclick",fn1); //这个针对onclick事件要注意啊 on不on的挺烦人
//        btn.attachEvent("onclick",fn2);
        function fn1() {
            console.log("已经绑定事件1！");
        }
        function fn2() {
            console.log("have2！");
        }
        function fn3() {
            console.log("have3！");
        }

        fn("click",fn1,btn);
        fn("click",fn2,btn);
        fn("click",fn3,btn);
        function fn(str,fn,ele) {
         var oldEvent=ele["on"+str];//用中括号[]进行绑定相当于ele.onclick
            ele["on"+str]=function () {
                if (oldEvent){
                    oldEvent();//加了括号表示执行函数
                    fn();
                }else{
                    fn();
                }
            }
        }

     //兼容式写法
        function fn4() {
            console.log("兼容式1！");
        }
        function fn5() {
            console.log("兼容式have2！");
        }
        function fn6() {
            console.log("兼容式have3！");
        }
         EventListener={
            addEvent:function (ele,fn,str) {
                if (ele.addEventListener){
                    ele.addEventListener(str,fn);
                }else if (ele.attachEvent){
                    ele.attachEvent("on"+str,fn);
                }else {
                    ele["on"+str]=fn;
                }
            }
         }
        EventListener.addEvent(btn,fn4,"click");
        EventListener.addEvent(btn,fn5,"click");
        EventListener.addEvent(btn,fn6,"click");
    </script>
    </html>